<template>
  <div class="Similarsinger">
    <div class="main">
      <div class="imglist" v-for="item in artists" :key="item.id">
        <img :src="item.img1v1Url" alt="" @click="getartists(item.id,item.name)">
        <p @click="getartists(item.id,item.name)">{{item.name}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Similarsinger',
  mounted() {
    this.$store.dispatch('getGetasimilarsingerList', { id: this.$route.query.id })
  },
  methods: {
    getartists(e, v) {
      //点击歌手照片跳转到相对应歌手的详情页面上
      this.$router.push({ path: '/home/Singerdetails', query: { id: e, name: v } })
      //以为是跳转当当前路由，所以跳转当前路由后要刷新页面
      setTimeout(function () {
        window.location.reload()
      }, 0)
    }
  },
  computed: {
    ...mapState({
      artists: state => state.Singger.artists
    })
  }
}
</script>

<style lang="less" scoped>
.Similarsinger {
  .main {
    margin-top: 20px;
    display: flex;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    .imglist {
      img {
        width: 250px;
        height: 250px;
        border-radius: 5px;
      }
      p {
        margin-top: 5px;
        font-size: 14px;
        margin-bottom: 30px;
        opacity: 0.6;
      }
      img:hover {
        cursor: pointer;
      }
    }

    p:hover {
      opacity: 1;
      cursor: pointer;
    }
  }
}
</style>